<template>
    <div>
        <div>
            房号:<input type="text" v-model="tiao.orderName">
            状态:<input type="radio" v-model="tiao.state" :value=0>启用
            <input type="radio" v-model="tiao.state" :value=1>禁用
            <input type="button" value="查询" @click="show">
        </div>
        <table class="table table-bordered">
    <tr>
       <td>id</td>
       <td>房号</td>
       <td>状态</td>
       <td>编辑</td>
    </tr>
    <tr v-for="item in info">
       <td>{{ item.id }}</td>
       <td>{{ item.orderName }}</td>
       <td>{{item.orderStatus==0?"启用":"禁用"}}</td>
       <td>
        <input type="button" value="修改" @click="upd(item.id)" class="btn btn-primary">
        <input type="button" value="删除" @click="dele(item.id)" class="btn btn-primary">
        <input type="button" value="修改状态" @click="upstate(item.id,item.orderStatus)" class="btn btn-primary">
       </td>
    </tr>
</table>
    </div>
</template>

<script setup lang="ts">
import { ref,reactive,onMounted } from 'vue';
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router';

let router=useRouter();
let route=useRoute();

let info:any=ref({
});
let tiao:any=reactive({
    orderName:'',
    state:-1
});
onMounted(()=>{
    show();
})
const show=()=>{
axios({
    url:'https://localhost:7002/api/Order/GetOrder',
    params:tiao,
    method:'get'
})
.then(res=>{
 info.value=res.data;
})
.catch(err=>{
    
})
}
const upd=(id:any)=>{
router.push({
    query:{id:id},
    path:'/upOrder'
})
}

const upstate=(id:any,state:any)=>{
    if(state==1){
state=0;
    }else{
        state=1;
    }
    axios({
url:'https://localhost:7002/api/Order/UpStateOrder',
params:{id:id,state:state},
method:'put'
    })
    .then(res=>{
        if(res.data>0){
alert('修改成功');
show();
        }else{
            alert('失败')
        }
    })
}

const dele=(id:any)=>{
    if(!confirm('确认删除吗')){
        return;
    }
axios({
    url:'https://localhost:7002/api/Order/DeleOrder',
    params:{id:id},
    method:'delete'
})
.then(res=>{
    if(res.data>0){
alert('删除成功');
show();
    }else{
        alert('删除失败')
    }
})
}

</script>

<style scoped>

</style>